<template>
	<view class="collection-all-box">
		<cu-custom :isBack="true" bgColor="bg-fa">
			<block slot="content">我的收藏</block>
			<view class="cu-right" slot="right">
				<text v-show="tabIndex == 2" class="right-text" @tap="switchDeleteType">{{isDelete ? '取消':'编辑'}}</text>
			</view>
		</cu-custom>
		
		<view class="coll-bar">
			<view class="bar-item" v-for="(item,index) in tabList" :key="index">
				<view class="bar-text" :class="{'bar-action':item.id == tabIndex}" @tap="switchBar(item)">
					{{item.name}}
				</view>
			</view>
		</view>
		
		
		
		<!--  商品列表  -->
		<view class="list-box" v-if="list.length>=1 && tabIndex == 2">
			<view class="list-item" v-for="(goods,gInd) in list" :key="gInd">
				<view class="check-box" v-show="isDelete">
					<u-checkbox  @change="footCheck('',goods,gInd)"  v-model="goods.check" label-size="0" size="32rpx" icon-size="24rpx" active-color="#fa436a" shape="circle"></u-checkbox>
				</view>
				<view class="img-box">
					<image class="img" :src="goods.img"></image>
				</view>
				<view class="content-box">
					<view class="name u-line-2">
						{{goods.goodsName}}
					</view>
					<view class="coll">
						{{goods.collection}}收藏
					</view>
					<view class="price-box">
						<view class="price">
							￥ {{goods.price}}
						</view>
						<view class="similar">找相似</view>
					</view>
				</view>
			</view>
		</view>
		<!--  商品列表end  -->
		
		
		<!--   店铺收藏列表   -->
		<view class="shop-list-box" v-if="tabIndex == 1">
			
			<view class="shop-box">
				<view class="shop">
					<view class="shop-logo">
						<image class="logo" src="~/static/index/zk.png"></image>
					</view>
					<view class="shop-right">
						<view class="shop-name">
							<view class="name u-line-1">
								魅族旗舰店
							</view>
							<view class="cancel">
								取消关注
							</view>
						</view>
						<view class="label-box">
							<text class="label">店铺</text>
							<text class="label-text">一年前关注</text>
						</view>
						
						<view class="goods-box">
							<view class="goods-img">
								<image class="img" src="~/static/index/zk.png"></image>
							</view>
							<view class="goods-img">
								<image class="img" src="~/static/index/zk.png"></image>
							</view>
							<view class="goods-img">
								<image class="img" src="~/static/index/zk.png"></image>
							</view>
						</view>
						
					</view>
				</view>
			</view>
			
		</view>
		
		<!--   店铺收藏列表end   -->
		
		
		<!--  没有数据的时候  -->
		<view class="none-list" v-if="list.length==0">
			<image src="../../static/mine/coll.png" class="none-img"></image>
			<view class="none-text">
				您还没有收藏任何{{tabIndex == 1 ? '店铺' : '商品'}} 赶紧去
				<text class="nav-to" @tap="navToIndex()">逛逛吧</text>
			</view>
		</view>
		
		<!--  没有数据的时候end  -->
		
		
		
		<view class="check-all-box" v-show="isDelete && tabIndex == 2">
			<view class="check-left">
				<u-checkbox  @change="checkAll"  v-model="Allchecked" label-size="0" size="32rpx" icon-size="24rpx" active-color="#fa436a" shape="circle"></u-checkbox>
				全部
			</view>
			<view class="check-right">
				<view class="check-btn" @tap="deleteFootprint">
					删除
				</view>
			</view>
		</view>
		
		<u-back-top :scroll-top="scrollTop" top="1000"></u-back-top>
	</view>
</template>

<script>
	export default {
		name:"footprint",
		data(){
			return {
				pageNo:1,
				isMore:false,
				isDelete:false,
				Allchecked:false,
				scrollTop:0,
				/*  当前是店铺页面还是商品页面  */ 
				tabIndex:1,
				
				tabList:[{id:1,name:"店铺"},{id:2,name:"商品"}],
				
				/*  缓存数据列表  */
				allList:[{id:1,name:"店铺",pageNo:1,list:[],isMore:false},
				{id:2,name:"商品",pageNo:1,list:[
					{id:0,goodsName:"念奴娇-生辰有怀 人生一世，四季有序，今树经一轮，而余长一岁； 其二十六载空悲切，未忘其心； 然花开不择贫家地",
					img:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=767930782,1364296812&fm=26&gp=0.jpg",
					price:500,collection:20
					},
					{id:1,goodsName:"南有樛木，葛藟累之。乐只君子，福履绥之。南有樛木，葛藟荒之。乐只君子，福履将之。南有樛木，葛藟萦之。乐只君子，福履成之。",
					img:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=767930782,1364296812&fm=26&gp=0.jpg",
					price:10,collection:50
					},
					{id:2,goodsName:"无家对寒食，有泪如金波。斫却月中桂，清光应更多。",
					img:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=767930782,1364296812&fm=26&gp=0.jpg",
					price:40,collection:10000
					}],
					isMore:false}],
				
				
				list:[]
			}
		},
		
		methods:{
			
			/*  顶部的按钮选择  */
			switchBar(item){
				if(this.tabIndex == item.id){
					return false
				}
				let allList = JSON.parse(JSON.stringify(this.allList))
				let newList = {}
				let oldList = {}
				let oldIndex = 0
				/*  获取新旧缓存数据  */
				for (let i = 0; i < allList.length; i++) {
					let newitem = allList[i]
					if(item.id == newitem.id){
						newList = newitem
					}
					if(this.tabIndex == newitem.id){
						oldList = newitem
						oldIndex = i
					}
				}
				
				oldList.list = this.list
				oldList.pageNo = this.pageNo
				oldList.isMore = this.isMore
				this.allList[oldIndex] = oldList
				
				this.list = newList.list
				this.isMore = newList.isMore
				this.pageNo = newList.pageNo
				this.tabIndex = item.id
			},
			
			/*  点击选择全部按钮  */
			checkAll(check){
				if(check.value){
					this.checkMethods(1)
				}else{
					this.checkMethods(2)
				}
			},
			
			/*   删除历史足迹   */
			deleteFootprint(){
				let check = this.checkMethods(3)
				if(check.length>0){
					
				}
			},
			
			/*  去首页  */
			navToIndex(){
				uni.switchTab({
					url:"/pages/index/index"
				})
			},
			
			/*  选择全部 获取取消全部选择 或者 获取已经选择 type 1 是选择全部 2是取消全部 3是获取已经选择的  */
			checkMethods(type){
				let list = JSON.parse(JSON.stringify(this.list))
				let isTrue = true
				if(type == 2){
					isTrue = false
				}
				let check = []
				for (let i = 0; i < list.length; i++) {
					let item = list[i]
					if(type == 1 || type == 2){
						item[i].check = isTrue
					}else if(type == 3 && item[i].check){
						check.push(item[i].id)
					}
					list[i] = item
				}
				if(type == 1 || type == 2){
					this.list = list
				}else if(type == 3){
					return check
				}
			},
			
			
			/*   足迹选中  第一个参数空 item 是商品信息 ind是商品所在的index pInd 所在父级的index  */ 
			footCheck(n,item,ind){
				let check = item.hasOwnProperty("check") ? item.check : true
				this.$set(this.list[ind],'check',check)
			},
			
			/*  切换删除模式  */
			switchDeleteType(){
				this.isDelete = !this.isDelete
			},
			
			/*  0 是刷新与第一次加载  1是滚动到底部加载  */
			getList(type){
				uni.stopPullDownRefresh()
				
			}
		},
		onLoad() {
			// this.getList()
		},
		/*  下拉刷新  */
		onPullDownRefresh() {
			let t = setTimeout(() => {
				this.pageNo = 1
				this.isMore = false
				this.getList(0)
				clearTimeout(t)
			}, 1000)
		},
		
		/*  滚动到底部  */
		onReachBottom(){
			if(this.isMore){
				this.pageNo = this.pageNo + 1
				this.getList(1)
			}
		},
		
		/*  监听滚动条  */
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		}
		
	}
</script>

<style scoped lang="scss">
	page{
		background: #F0F0F0;
	}
	.collection-all-box{
		position: relative;
		width: 100%;
		
		.cu-right{
			.right-text{
				font-size: 24rpx;
				padding-right: 30rpx;
				color: #FFFFFF;
			}
		}
		
		.list-box{
			padding: 0 12rpx 140rpx 12rpx;
			
		}
		
		.list-time{
			padding: 20rpx 0 0 0;
			text-align: center;
		}
		
		.time-text{
			font-size: 24rpx;
			color: #818181;
			background: #F0F0F0;
		}
		
		/*  商品列表item  */
		.list-item{
			background: #FFFFFF;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 30rpx 20rpx;
			border-radius: 10rpx 10rpx;
			margin-top: 30rpx;
			.check-box{
				min-width: 80rpx;
				max-width: 80rpx;
			}
			.img-box{
				max-width: 192rpx;
				min-width: 192rpx;
				height: 192rpx;
				.img{
					width: 192rpx;
					height: 192rpx;
				}
			}
			.content-box{
				flex-grow: 1;
				padding-left: 16rpx;
				text-align: left;
				.name{
					color: #333333;
					font-size: 26rpx;
					font-weight: 400;
					height: 80rpx;
				}
			}
			.coll{
				color: #8D8D8D;
				font-size: 24rpx;
			}
			.price-box{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.price{
					font-size: 32rpx;
					font-weight: 400;
					color: #D90707;
				}
				.similar{
					font-size: 22rpx;
					color: #888;
					border: 2rpx solid #AAAAAA;
					padding: 6rpx 14rpx;
					line-height: 24rpx;
					border-radius: 40rpx 40rpx;
				}
			}
		}
		
		/*  商品列表item 结束  */
		
		
		/*  底部的全选  */
		.check-all-box{
			position: fixed;
			bottom: 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 100rpx;
			background: #FFFFFF;
			width: 100%;
			padding: 0 20rpx;
			.check-left{
				color: #666666;
				font-size: 24rpx;
			}
			.check-right{
				.check-btn{
					width: 160rpx;
					height: 100rpx;
					line-height: 100rpx;
					text-align: center;
					background: #FA436A;
					color: #FFFFFF;
					font-size: 32rpx;
				}
			}
		}
		/* 底部的全选 */
		
		
		.none-list{
			margin-top: 40%;
			text-align: center;
			.none-img{
				width: 240rpx;
				height: 192rpx;
			}
			.none-text{
				color: #8D8D8D;
				font-size: 28rpx;
				padding-top: 30rpx;
				.nav-to{
					color: #FA436A;
					font-size: 28rpx;
					padding-left: 8rpx;
				}
			}
		}
		
		/*  顶部tab切换  */
		
		.coll-bar{
			background: #FFFFFF;
			height: 70rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			.bar-item{
				flex-grow: 1;
				width: 50%;
				height: 100%;
				text-align: center;
				.bar-text{
					color: #4B4B4B;
					font-size: 28rpx;
					height: 100%;
					line-height: 70rpx;
					width: 160rpx;
					display: inline-block;
					border-bottom: 4rpx solid transparent;
				}
				.bar-action{
					border-bottom: 4rpx solid #FA436A;
				}
			}
		}
		
		/*  顶部tab切换end  */
		
		
		/*  店铺列表  */
		.shop-list-box{
			width: 100%;
			padding: 0 10rpx;
			.shop-box{
				background: #FFFFFF;
				padding: 20rpx;
				margin-top: 30rpx;
				.shop{
					display: flex;
					justify-content: flex-start;
					align-items: flex-start;
				}
				.shop-logo{
					width: 120rpx;
					height: 94rpx;
					text-align: left;
					.logo{
						width: 94rpx;
						height: 94rpx;
						border-radius: 94rpx 94rpx;
					}
				}
				.shop-right{
					width: calc(100% - 120rpx);
				}
				.shop-name{
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.name{
						min-width: calc(100% - 120rpx);
						max-width: calc(100% - 120rpx);
						color: #000000;
						font-size: 32rpx;
					}
					.cancel{
						min-width: 120rpx;
						max-width: 120rpx;
						background: #FA436A;
						color: #FFFFFF;
						font-size: 24rpx;
						height: 40rpx;
						line-height: 40rpx;
						border-radius: 40rpx 40rpx;
						text-align: center;
					}
				}
				
				.label-box{
					padding-top: 6rpx;
					.label{
						display: inline-block;
						padding: 6rpx 10rpx;
						font-size: 22rpx;
						color: #FFFFFF;
						border-radius: 50rpx 50rpx;
						line-height: 1;
						background: #FA436A;
						margin-right: 20rpx;
					}
					.label-text{
						color: #8c8c8c;
						font-size: 22rpx;
					}
				}
				.goods-box{
					padding-top: 30rpx;
					display: flex;
					justify-content: space-between;
					align-items: flex-start;
					.goods-img{
						min-width: 180rpx;
						max-width: 180rpx;
						height: 120rpx;
						.img{
							width: 180rpx;
							height: 120rpx;
							border-radius: 10rpx;
						}
					}
				}
			
			}
		}
		
	}
</style>
